<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员系统</title>
    <style>
        #photo1{
            position: absolute;
            top: 0px;
            left:0px;
        }
        #f1{
            background-color: rgba(38, 37, 34, 0.747);
            border-radius: 4px;
            position: absolute;
            top: 0px;
            left:0px;
            width: 1450px;;
            height: 720px;;
        }
        #f2{
            background-color: rgba(253, 248, 237, 0.399);
            border-radius: 4px;
            width: 800px;
            height: 500px;
            position:absolute;
            left: 320px;
            top: 150px;
        }
        #line{
            background-color: rgba(230, 159, 6, 0.851);
            position: absolute;
            top: 100px;
            left:0px;
            width: 1450px;;
            height: 2px;;
        }
        button[name="first"]{
            appearance: none;
            position: absolute;
            background-color: rgba(255, 255, 255, 0);
            border: 0;
            color: rgba(255, 255, 255, 0.908);
            top: 65px;
            left:1140px;
            font-size: 30px;
        }
        button[name="exit"]{
            appearance: none;
            position: absolute;
            background-color: rgba(255, 255, 255, 0);
            border: 0;
            color: rgba(248, 248, 248, 0.908);
            top: 65px;
            left:1260px;
            font-size: 30px;
        }
        button[id="check"]{
            appearance: none;
            position: absolute;
            color: rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 185px;
            left:640px;
            font-size: 26px;
            font-weight: 500;
        }
        button[id="add"]{
            appearance: none;
            position: absolute;
            color: rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 600px;
            left:640px;
            font-size: 26px;
            font-weight: 500;
        }
        button[id="search1"]{
            appearance: none;
            position: absolute;
            color: rgba(0, 0, 0, 0.641);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 250px;
            left:900px;
            font-size: 24px;
            font-weight: 500;
        }
        button[id="search2"]{
            appearance: none;
            position: absolute;
            color: rgba(0, 0, 0, 0.641);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 340px;
            left:900px;
            font-size: 24px;
            font-weight: 500;
        }
        button[id="search3"]{
            appearance: none;
            position: absolute;
            color: rgba(0, 0, 0, 0.641);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 430px;
            left:900px;
            font-size: 24px;
            font-weight: 500;
        }
        button[id="search4"]{
            position: absolute;
            color: rgba(0, 0, 0, 0.641);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 520px;
            left:900px;
            font-size: 24px;
            font-weight: 500;
        }
        input[name="id"]{
            appearance: none;
            background-color: rgba(254, 251, 246, 0.819);
            border-radius: 4px;
            border: 0;
            width: 300px;
            height: 30px;
            position:absolute;
            left: 550px;
            top: 250px;
        }
        input[name="name"]{
            appearance: none;
            background-color: rgba(255, 255, 255, 0.799);
            border-radius: 4px;
            border: 0;
            width: 300px;
            height: 30px;
            position:absolute;
            left: 550px;
            top: 340px;
        }
        input[name="author"]{
            appearance: none;
            background-color: rgba(255, 255, 255, 0.799);
            border-radius: 4px;
            border: 0;
            width: 300px;
            height: 30px;
            position:absolute;
            left: 550px;
            top: 430px;
        }
        select[name="type"]{
            background-color: rgba(255, 255, 255, 0.799);
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.536);
            border: 0;
            width: 300px;
            height: 30px;
            position:absolute;
            left: 550px;
            top: 520px;
        }
    </style>
    <script>
        function clearInputID() {
            document.getElementById('id').value = '';
        }
        function clearInputNAME() {
            document.getElementsByName('name').value = '';
        }
        function clearInputAUTHOR() {
            document.getElementsByName('author').value = '';
        }
        function clearInputTYPE() {
            document.getElementsByName('type').value = '';
        }
    </script>
</head>
<body>
<p id="photo1"><img src="https://zs.stu.edu.cn/images/21/06/11/1vtx9km97b/_K012215.jpg" width="1450" height="720"/></p >
<p id="f1"></p>
<p id="line"></p>
<p id="f2"></p>
<button onclick="window.location.href='personmanager.jsp'" type="button" name="first">首页</button>
<button onclick="window.location.href='a.jsp'" type="button" name="exit">退出</button>
<form action="showall3?page=1" method="post">
    <button type="submit" id="check">查看所有</button>
</form>
<form action="addbook.jsp" method="post">
    <button type="submit" id="add">添加图书</button>
</form>
<form action="searchid" method="POST" onsubmit="clearInputID()">
    <input type="text" placeholder="请输入id"  name="id"/>
    <button type="submit" id="search1">搜索</button>
</form>
<form action="searchname" method="POST" onsubmit="clearInputNAME()">
    <input type="text" placeholder="请输入图书名称" name="name"/>
    <button type="submit" id="search2">搜索</button>
</form>
<form action="searchauthor" method="POST" onsubmit="clearInputAUTHOR()">
    <input type="text" placeholder="请输入图书作者" name="author"/>
    <button type="submit" id="search3">搜索</button>
</form>
<form action="searchtype" method="POST"  onsubmit="clearInputTYPE()">
    <select name="type">
        <option value="空" selected>请选择图书类型</option>
        <option value="文学">文学</option>
        <option value="科技">科技</option>
        <option value="教育">教育</option>
        <option value="艺术">艺术</option>
        <option value="军事">军事</option>
    </select>
    <button type="submit" id="search4">搜索</button>
</form>
</body>
</html>